<template>
  <el-upload
    list-type="picture-card"
    :action="baseURL + '/uploads'"
    name="image"
    :show-file-list="false"
    :before-upload="beforeUpload"
    :on-success="onSuccess"
  >
    <img v-if="imageUrl" :src="imageUrl" alt="" class="avatar" />
    <i v-else class="el-icon-plus"></i
  ></el-upload>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
      baseURL: "http://localhost/heimamm/public",
    };
  },
  methods: {
    /* 图片导入之前 */
    beforeUpload(file) {
      // size  ,type   ,name
      const limitType =
        file.type === "image/png" ||
        file.type === "image/jpeg" ||
        file.type === "image/gif";
      if (!limitType) {
        this.$message.error("请上传png/jpg/gif格式图片");
      }
      const limitSize = file.size / 1024 / 1024 < 10;
      if (!limitSize) {
        this.$message.error("请上传10Mb内的图片");
      }
      // console.log(file)
      return limitType && limitSize;
    },
    async onSuccess(res) {
      console.log(res);
      // 拼接图片
      this.imageUrl = this.baseURL + "/" + res.data.file_path;
      this.$emit("photo", res.data.file_path);
      //console.log(res.data.file_path);
    },
  },
};
</script>

<style lang="less" scoped>
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
